<template>
  <div style="margin: 0px;padding: 0px;">
    <div class="M1" style="background: #ffffff">
      <el-breadcrumb
        separator-class="el-icon-arrow-right"
        style="background: #ffffff"
      >
        <!--    导航-->
        <el-breadcrumb-item :to="{ path: '/mainload' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>活动管理</el-breadcrumb-item>
        <el-breadcrumb-item>活动列表</el-breadcrumb-item>
        <el-breadcrumb-item>活动详情</el-breadcrumb-item>
      </el-breadcrumb>
      <el-divider></el-divider>
      <el-descriptions :title=ExpDescData.title>
        <!--   实验信息 -->
        <el-descriptions-item label="简介"
          >{{ExpDescData.projectAbs}}</el-descriptions-item
        >
        <el-descriptions-item label="用户">{{ExpDescData.nickname}}</el-descriptions-item>
        <el-descriptions-item label="日期">{{ExpDescData.projectTime}}</el-descriptions-item>
        <el-descriptions-item label="分类">
          <el-tag size="small">{{ExpDescData.projectType}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="标签">
          <el-tag size="small">{{ExpDescData.projectArea}}</el-tag>
          <el-tag size="small">{{ExpDescData.projectMethod}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <el-button type="primary" style="width:100px" @click="showRunDialog">运行按钮</el-button>
          <el-button type="danger" v-show="userDir != ''" @click="showCloseDialog">停止并保存</el-button>
        </el-descriptions-item> 
      </el-descriptions>
      <el-divider></el-divider>
      <el-tabs type="border-card" style="width:100%;text-align:left">
        <!-- 卡片标签  -->
        <el-tab-pane label="详情">
          <br />
              <div
                class="content-markdwon"
                v-html="compileMarkDown(content)"
                v-highlight
              >
              </div>
        </el-tab-pane>
        <el-tab-pane label="相关项目">
          <br />
          <div>内容--</div>
        </el-tab-pane>
        <el-tab-pane label="评论">
          <br />
          
            <br />
            <div style="width: 80%; margin: 0 auto">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>
                    <div>
                      <el-button icon="el-icon-view" circle></el-button>
                      <el-divider direction="vertical"></el-divider>
                      <el-button round>B</el-button>
                      <el-button icon="el-icon-s-fold" circle></el-button>
                      <el-divider direction="vertical"></el-divider>
                      <el-button round></></el-button>
                      <el-button icon="el-icon-picture" circle></el-button>
                    </div>
                  </span>
                </div>
                <div style="width: 7%; float: left">
                  <el-avatar :src=this.userFace ></el-avatar>
                </div>
                <div
                  style="
                    width: 60%;
                    float: right;
                    margin-right: 33%;
                    margin-bottom: 20px;
                  "
                >
                  <el-input
                    type="textarea"
                    id="textinput"
                    :rows="4"
                    placeholder="评论一下吧"
                    v-model="comment.content"
                  >
                  </el-input>
                </div>
              </el-card>
              <br>
              <el-button type="primary" style="font-size:20px;margin-left:30px" @click="add()">发&nbsp&nbsp布</el-button>
              <el-divider></el-divider>
              <br>
              <div style="font-size:22px;float:left;width:100%" >
                <el-divider direction="vertical"></el-divider>
                  全部评论
                  <el-button round>只看作者</el-button>
                  <div style="font-size:15px;float:right;margin-top:5px;">
                    <el-switch
                        v-model="value1"
                        active-text="按时间正序"
                        inactive-text="按时间倒序">
                      </el-switch>
                  </div>
                  <br>
                  <div v-for="(item,i) in ExpComment.obj"> 
                    <div v-if="item.level_Flag==1">
                       <div style="float:left;width:7%" >
                    <br>
                    <el-avatar :src=item.userFace></el-avatar>
                  </div>
                  <div style="float:right;width:93%">
                  <div>
                    <br>
                    <div style="font-size:25px">
                    <span style="font-size:25px">名字:</span>{{item.nickName}}
                    </div>
                    <div style="font-size:15px">
                      {{item.content}}
                    </div>
                    <br>
                    <div style="font-size:15px;margin-left:30px" >
                      <el-button type="text">回复评论</el-button>
                    </div>
                    <el-divider></el-divider>
                  </div>
                   
                  <div v-if="item.expCommentNodeTreeVos!=null" v-for="(node,j) in item.expCommentNodeTreeVos">
                    <div style="float:left;width:7%;margin-left:10%">
                    <br>
                      <el-avatar :src=node.userFace></el-avatar>
                    </div>
                    <div style="width:83%;float:right">
                      <br/>
                    <div>
                    <div style="font-size:15px">
                      <span style="font-size:16px">名字:</span>{{node.nickName}}
                    </div>
                    <div style="font-size:12px">
                      <span style="font-size:16px">内容:</span>{{node.content}}
                    </div>
                      <br>
                    <div style="font-size:15px">
                      <el-button type="text">回复评论</el-button>
                    </div>
                    </div>
                    <div style="float:right;width:100%">
                      <el-divider></el-divider>
                    </div>
                  </div>
                   

                  </div>
                  </div>
                  
                    </div>
                  </div>

                  

              </div>
            </div>
        </el-tab-pane>
        <el-tab-pane label="Fork记录">
          <br />
          <div>
            记录展示:
            <el-table
              :data="forks"
              style="width: 100%">
              <el-table-column
                prop="nickname"
                label="用户名"
                width="180">
              </el-table-column>
              <el-table-column
                prop="forktime"
                label="时间"
                width="180">
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 是否运行python对话框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      >
      <span>接下来将进入Python运行界面是否进入?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="runPython">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 关闭python对话框 -->
    <el-dialog
      title="提示"
      :visible.sync="closePythonVisible"
      width="30%"
      >
      <span>Python将要关闭,请确认保存后再点击确认!</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closePythonVisible = false">取 消</el-button>
        <el-button type="primary" @click="closeAndsave">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import showdown from 'showdown'
// import showdownKatex from "showdown-katex";
// import 'github-markdown-css/github-markdown.css'
import hljs from 'highlight.js'
import 'highlight.js/styles/default.css'
var converter = new showdown.Converter()
converter.setOption('tables', true)
export default {
  name: 'ExpView',
  directives: {
    highlight: {
      update(el) {
        let blocks = el.querySelectorAll('pre code')
        blocks.forEach((block) => {
          hljs.highlightBlock(block)
        })
      },
    },
  },
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      user: JSON.parse(window.sessionStorage.getItem('user')),
      userFace:
        'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
      nickname: '',
      id: null,
      ExprojecId: null,
      ExpDescData: {},
      md: '',
      content: '',
      html: '',
      comment: {
        expId: null,
        parentId: 1,
        levelFlag: 1,
        userId: null,
        content: '',
      },
      ExpComment: [
        {
          comment_id: null,
          exp_id: null,
          parent_id: null,
          userFace: '',
          nickName: '',
          content: '',
          level_Flag: null,
          user_id: '',
          create_time: '',
          expCommentNodeTreeVos: [],
        },
      ],
      value1: true,
      value2: true,
      dialogVisible: false,
      forks: [], //fork记录显示表格中的数据
      userDir: '', //现在用户运行的用户目录
      closePythonVisible: false,
    }
  },
  methods: {
    handleSelect(key, keyPath) {},
    initUser() {
      if (this.user) {
        this.userFace = this.user.userFace
        this.nickname = this.user.nickname
        this.comment.userId = this.user.id
      }
    },
    getExpProjectDec() {
      let expProject = this.$route.query.expId
      this.ExprojecId = expProject
      this.comment.expId = expProject
      this.$axios(`/experiment/findById/${expProject}`)
        .then((res) => {
          this.ExpDescData = res.obj
        })
        .catch((error) => {})
      this.$axios(`/experiment/${expProject}`)
        .then((res) => {
          this.content = res
        })
        .catch((error) => {})
      this.$axios(`exp-comment/findComment/${expProject}`)
        .then((res) => {
          this.ExpComment = res
          // alert(this.ExpComment.obj)
        })
        .catch((error) => {})
    },
    add() {
      this.comment.parentId = this.comment.userId
      this.$axios({
        url: '/exp-comment/add',
        method: 'post',
        data: {
          ...this.comment,
        },
      }).then((res) => {
        if (res.obj.code == 200) {
          this.$message({
            message: '添加成功',
            type: 'success',
          })
        }
      })
    },
    compileMarkDown(val) {
      return converter.makeHtml(val)
    },
    showRunDialog() {
      this.dialogVisible = true
    },
    runPython() {
      console.log('python方法执行了')
      this.getRequest(
        '/experiment/run/' + this.ExprojecId + '/' + this.user.id
      ).then((resp) => {
        console.log('@返回结果', resp)
        this.userDir = resp.obj
        console.log('@userDir', this.userDir)
        this.dialogVisible = false
        this.initFork()
      })
      this.initFork()
    },
    initFork() {
      let url = '/fork-exp/' + this.ExprojecId
      this.getRequest(url).then((resp) => {
        if (resp) {
          this.forks = resp
        }
      })
    },
    closeAndsave() {
      this.getRequest(
        '/experiment/close/' + this.ExprojecId + '?userDir=' + this.userDir
      ).then((resp) => {
        this.userDir = ''
        this.closePythonVisible = false
      })
    },
    showCloseDialog(){
      this.closePythonVisible = true;
    }
  },
  mounted() {},

  created() {
    this.initUser()
    this.getExpProjectDec()
    this.initFork()
  },
}
</script>

<style scoped>
.content-markdwon {
  box-sizing: border-box;
  min-width: 200px;
  max-width: 980px;
  margin: 0 auto;
  padding: 45px;
  float: center;
}

@media (max-width: 767px) {
  .markdown-body {
    padding: 15px;
  }
}
.M1 {
  margin: 0 auto;
  width: 1200px;
}
.border-card {
  width: 100%;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}

.JST {
  font-size: 20px;
}
</style>
 